<template>
    <div>
        <el-table :data="takepiclist">
        <el-table-column label="用户头像" prop="user_avatar" width="200px">
          <template slot-scope="scope">
            <img :src="scope.row.user_avatar" alt="" width="100px" class="avatar">
          </template>
        </el-table-column>
        <el-table-column label="用户姓名" prop="user_name" width="200px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column id="desc" label="联系方式" prop="user_phone" width="300px"
          :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="时间" prop="pic_time" width="200px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="预约状态" prop="pic_resolve" width="200px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pic_resolve == 0" type="info" >未完成</el-button>
            <el-button v-if="scope.row.pic_resolve == 1" type="success" >已完成</el-button>
          </template>
        </el-table-column>
        <el-table-column label="修改状态" width="220px" prop="pic_id">
          <template slot-scope="scope">
            <el-row>
              <el-button type="warning" icon="el-icon-edit" circle 
                @click="changeState(scope.row.pic_id)"></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import httpApi from '@/http';
    export default {
        data() {
            return {
                takepiclist:[],
                petshop_id:''

            }
        },
        methods: {
            queryTakePicList() {
                let params={petshop_id:this.petshop_id,pno:1,count:5}
                httpApi.petshopApi.getPicbyPetshopId(params).then(res=>{
                    console.log(res)
                    this.takepiclist=res.data.data
                })
            },
            changeState(id){
                let params={pic_id:id}
                httpApi.petshopApi.updatePicState(params).then(res=>{
                    console.log(res)
                    if(res.data.code==200){
                        this.queryTakePicList()
                    }
                })
            }

        },
        mounted () {
            let user = this.$store.state.user
            this.petshop_id = (user[0].petshop_id)
            this.queryTakePicList()
        },

    }
</script>

<style lang="scss" scoped>
.avatar{
  border-radius: 50%;
}
</style>